<template>
  <div class="djbanner">
    <el-carousel :interval="4000" type="card" height="255px">
        <el-carousel-item v-for="(item, index) in djbannerlist" :key="index">
          <el-image :src="item.pic" fit="contain" @click="changeUrl(item.targetId)"></el-image>
          <el-tag :type="item.typeTitle === '独家' ? 'danger' : 'primary'" effect="dark">{{ item.typeTitle }}</el-tag>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
import { getDjBaner } from '../../../network/dj.js'
export default {
  data () {
    return {
      djbannerlist: [],
      djUrl: '',
      musicUrl: '',
      musicMenu: {}
    }
  },
  methods: {
    getDjBaner () {
      getDjBaner().then(res => {
        // console.log(res.data)
        this.djbannerlist = res.data.data
      })
    },
    // 改变播放音乐地址
    // 暂无接口数据
    changeUrl (id) {
      if (id === null) return
      this.getMusicUrl(id)
      this.getMusicMenu(id)
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data)
        if (res.data.data[0].url === null) {
          return this.$message.error('获取资源失败！')
        }
        this.musicUrl = res.data.data[0].url
        this.$store.commit('getNowMusic', this.musicUrl)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data)
        this.musicMenu = res.data.songs[0]
        this.$store.commit('getnowMusicMenu', this.musicMenu)
      })
    }
  },
  created () {
    this.getDjBaner()
  }
}
</script>

<style lang="less" scoped>
  .djbanner {
    width: 95%;
    margin: auto;
    .el-carousel__item {
      overflow: hidden;
      .el-image {
        // width: 100%;
        height: 100%;
        background-size: cover;
      }
      .el-tag {
        height: 19px;
        line-height: 19px;
        position: absolute;
        bottom: 10%;
        right: 0;
        border-radius: 10px 0 0 10px;
      }
    }
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
